<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义组件2-子传父</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        父组件
        <!-- handleFather($event) 可以不写，自动传递 -->
        <child @father="handleFather">

        </child>

    </div>

    <script>
        //全局组件
        Vue.component("child", {
            template: `<div>
                child组件
                
                <button @click="toFather()">子传父</button>
                </div>`,
            data() {
                return {
                    childname: "子组件状态"
                }
            },
            methods: {

                toFather() {
                    console.log("我被点击了");
                    this.$emit("father", this.childname);
                }
            }
        })
        new Vue({
            el: "#box",
            data: {

            },
            methods: {
                handleFather(ev) {
                    // console.log(ev);
                    console.log("我是father,我收到son你的信息了", ev);
                }
            }
        })
    </script>

</body>

</html>